<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="file" name="" id="" multiple>
    <img src="" alt="">
    <script>
        /*
            接口的文档，每一个接口的请求方式可能都不一样（具体用哪种请求方式需要看接口文档）
                todolist-》get请求请求--不是标准的restful api接口

                get请求- 一般情况获取数据
                    特点-请求参数在 url中，url大小有限制 
                post请求- 一般情况上传数据（发布）
                    参数要放到请求体中


                restful api 接口规范 （一种接口使用的标准）
                    get请求- 一般情况获取数据
                    post请求- 一般情况上传数据
                    delete请求- 一般用于删除数据
                    put/patch - 一般用于修改数据
                   
                    
             一个请求 类似一个
                请求行  url  请求 方式 
                请求头   键值对 ---大部门键值对都是自动设置的
                请求空行  
                请求体    请求的大部分的内容   


        
        */

        /* 
        
    接口功能：创建一条待办事项
    接口地址：http://jx.xuzhixiang.top/ap/api/todos/create.php
    接口请求方式：get--也支持post请求
    接口参数：
         title :标题 （必选参数）
         description: 内容
         type: 类型  0 1 完成状态
        
        */


        let ipt = document.querySelector('input');


        // 上传文件-视频--图片--用input type file -- 监听 change事件
        ipt.onchange = function () {





            let xhr = new XMLHttpRequest()
            let url = 'http://jx.xuzhixiang.top/upload_file_qn.php'
            xhr.open('post', url);

            // -------jx.xuzhixiang.top 网站里面的接口 要求请求体都是 搜索字符串类型
            // json数据类型 服务器服务器不支持
            //  在使用post请求的时候， 看好接口文档中说明 -content-type 要用哪一种

            //    
            // xhr.send(请求体的数据)
            // xhr.send(请求体的数据)
            // ---- post请求体的参数形式
            // content-type 内容类型--在请求头里面设置--标明请求体里面的数据的内容的类型

            // 1- 表单字符串 搜索字符串 key=value&key2=value2
            // 前端 还得设置 请求头里面的字段 content-type： application/x-www-form-urlencoded

            // 2- json字符串 {"key":"value","key2":"value2"}
            // 前端 还得设置 请求头里面的字段 content-type： application/json

            // 3-  上传图片-文件---表单对象 ---FormData  --js中构造函数创建表单数据    

            // 获取我们选中文件

            // files 存放的我们所有选中文件
            console.log(ipt.files);
            // 拿到 第0个图片
            let file = ipt.files[0];
            // file 图片对象--二进制数据

            // 上传图片-文件---表单对象 ---FormData  --js中构造函数创建表单数据  
            let fd = new FormData();
            // fd.append('键名'，’键值)
            // fd.append('键名'，图片对象)
            // 键名--看接口文档--
            fd.append('file', file);
            fd.append('a', '121')

            /* 
            18.上传图片接口

    接口地址：    http://jx.xuzhixiang.top/upload_file_qn.php
         接口请求方式：post
         接口参数：
            formData对象
              参数名：file 参数值： 图片对象
         测试例子：jx.xuzhixiang.top/unpoad_qn.html
            */

            // 发送表单对象
            xhr.send(fd)



            xhr.onload = function () {
                if (xhr.status == 200) {
                    let obj = JSON.parse(xhr.responseText);
                    console.log(obj);
                    // 返回的 图片的网址
                    console.log(obj.file_url);

                    var img = document.querySelector('img');
                    img.src = obj.file_url;
                }
            }


        }

    </script>

</body>

</html>